import React, {useCallback, useEffect, useState} from "react"
import Taro from '@tarojs/taro'
import {Image, Text, View} from "@tarojs/components"
import {getRecommend, getRecommendSight} from '@/services/home'
import Recommend from '@/components/Recommend/Recommend'
import GridLayer from '@/components/GridLayer/GridLayer'
import {fchts} from '@/assets/constant/home'
import {usePositionHook} from '@/hooks/position'
import Loading from '@/components/Loading/Loading'
import PageLoading from '@/components/PageLoading/PageLoading'
import CustomerInput from '@/components/Input/Input'
import Topping from '@/components/Topping/Topping'
import {useCheckLogin, useRoutePlan, useSightLoading} from '@/hooks'
import {SightInfo, SightInfoRet} from '@/type'
import "./Home.scss"

/**
 * 跳转路由
 */
const useNavigator = () => {

  const {routeScrollTo} = useRoutePlan()

  const navigateTo = useCallback((url) => {
    Taro.navigateTo({
      url:  url
    })
  }, [])

  const clickGridLayer = useCallback((url) => {
    if (url.search('/Travel/Travel') > -1) {
      routeScrollTo({
        name: '重庆',
        latitude: 29.615452,
        longitude: 106.557317
      })
      return
    }
    navigateTo(url)
  }, [navigateTo, routeScrollTo])

  const onselect = useCallback((sightInfo: SightInfo) => {
    navigateTo(`/packageA/pages/Scene/Scene?id=${sightInfo.id}`)
  }, [navigateTo])

  const onfocus = useCallback(() => {
    navigateTo('/pages/Search/Search')
  }, [navigateTo])

  const onUploadTo = useCallback(() => {
    navigateTo('/packageC/pages/Upload/Upload?type=recommend')
  }, [navigateTo])

  return {
    clickGridLayer, onselect, onfocus, onUploadTo
  }
}

const Home: React.FC = () => {
  const [curIndex, setCurIndex] = useState(0)

  const {userInfo, isLogin} = useCheckLogin()

  const {sightInfos: sightRecommend} = useSightLoading((page): Promise<SightInfoRet> => {
    return getRecommend(page, 10)
  }, 10 , isLogin)

  const {sightInfos: sightPaths} = useSightLoading((page): Promise<SightInfoRet> => {
    return getRecommendSight(page, 10)
  }, 10 , isLogin)


  const [sightInfos, setSightInfos] = useState<SightInfo[]>([])

  const {curCity} = usePositionHook()

  const {onselect, onfocus, clickGridLayer, onUploadTo} = useNavigator()

  useEffect(() => {
    if (curIndex === 0) {
      setSightInfos(sightRecommend)
    } else {
      setSightInfos(sightPaths)
    }
  }, [curIndex, sightRecommend , sightPaths])

  function onChangeTab (e: any) {
    if (e.target.dataset.index == null) return
    setCurIndex(+e.target.dataset.index)
  }

  function navigator () {
    Taro.switchTab({
      url: '/pages/User/Index/index'
    })
  }

  return <View className='container'>
    <View className='info'>
      <View className='info_content'>
        <Text className='info_content_user'>Hi <Text style={{color: '#FFA183'}}>Daria!</Text></Text>
        <Text className='info_content_place'>欢迎来到{curCity}</Text>
      </View>
      <Image className='info_avatar' src={userInfo.avatarUrl} onClick={navigator} />
    </View>
    <View className='home_search' onClick={onfocus}>
      <CustomerInput />
    </View>
    <GridLayer grids={fchts} onclick={clickGridLayer} />
    <View className='home_title'>
      Discover
      <Text className='iconfont' onClick={onUploadTo}>&#xe767;</Text>
    </View>
    <View className='nav_wrap'>
      <View className='nav_tab' onClick={onChangeTab}>
        <View className='tab_wrap' data-index='0'>
          <Text className={`tab_wrap_title ${curIndex === 0 ? 'active' : ''}`} data-index='0'>达人推荐</Text>
          <View className={`tab_wrap_underline ${curIndex === 0 ? 'active' : ''}`} />
        </View>
        <View className='tab_wrap' data-index='1'>
          <Text className={`tab_wrap_title ${curIndex === 1 ? 'active' : ''}`} data-index='1'>热门路线</Text>
          <View className={`tab_wrap_underline ${curIndex === 1 ? 'active' : ''}`} />
        </View>
      </View>
    </View>
    <View style={{width: 'calc(100% + 10px)'}}>
      {
        sightInfos.length ? <Recommend sightInfos={sightInfos} onselect={onselect} />
          : <View className='pageloading_wrap'>
            <PageLoading />
          </View>
      }
    </View>
    {
      sightInfos.length ? <View className='loading_wrap'>
        <Loading />
      </View> : <></>
    }
    <Topping />
  </View>
}

export default Home
